<template>
  <div class="m3u8video-player">
    <div>
      <video ref="videoElem" muted autoplay controls style="margin: auto 0" width="600" height="500">
        <source :src="videoPath">
      </video>
    </div>
    <div>

    </div>
  </div>
</template>

<script>
export default {
  name: "M3u8VideoPlayer",
  data() {
    return {
      videoId: "",
      video: {videoPath: ""}
    }
  },
  created() {
    var videoId = this.$route.params.id;
    this.videoId = videoId;
    this.$http({
      url: `/m3u8video/get?id=${videoId}`,
    }).then(({data}) => {
        this.video = data.video;
        this.$nextTick(() => {
          this.$refs.videoElem.load();
        });
    });
  },
  computed: {
    videoPath() {
      return this.$videoServerUrl + "/" + this.video.videoPath;
    }
  }
}
</script>

<style>

</style>